<template>
  <el-form :inline="true" :model="form" label-width="auto" style="padding: 10px;">
       <el-row>
         <el-col :span="4"><label>事件ID</label></el-col>
         <el-col :span="8">{{form.id}}</el-col>
         <el-col :span="4"><label>名称</label></el-col>
         <el-col :span="8">{{form.name}}</el-col>
       </el-row>
       <el-row>
         <el-col :span="4"><label>产品</label></el-col>
         <el-col :span="8">{{form.tran.profileName}}</el-col>
         <el-col :span="4"><label>终端</label></el-col>
         <el-col :span="8">{{form.tran.terminalName}}</el-col>
       </el-row>
       <el-row>
         <el-col :span="4"><label>事件时间</label></el-col>
         <el-col :span="8">{{form.eventTime}}</el-col>
         <el-col :span="4"><label>动作类型</label></el-col>
         <el-col :span="8">{{form.tran.actionType}}</el-col>
       </el-row>
       <el-row>
         <el-col :span="4"><label>是否成功</label></el-col>
         <el-col :span="8">{{form.success?'是':'否'}}</el-col>
         <el-col :span="4"><label></label></el-col>
         <el-col :span="8"></el-col>
       </el-row>
       <el-row>
         <el-col :span="4"><label>参数</label></el-col>
         <el-col :span="20">
         </el-col>
       </el-row>
      <el-row>
        <el-col :span="24">
          <pre><code :class="`language-javascript`" class="line-numbers">{{form.params}}</code></pre>
        </el-col>
      </el-row>
          <div style="text-align:center;margin: 10px auto;">
            <el-button @click="handleCancel">取消</el-button>
          </div>
      </el-form>

</template>
<script>
    import{reactive, ref} from 'vue'
    const {ElMessage,ElMessageBox} = ElementPlus;
    import Prism from "../../public/prism/prism.js"
    export default {
      components: {},
        props:{
          initParams:Object
        },
        setup(props,context){
            const form=reactive({
              id:'',
              name:'',
              sceneId:'',
              userId:'',
              terminalCode:'',
              actionType:'',
              eventTime:'',
              success:0,
              params:null,
              tran:{
                profileName:'',
                terminalName:'',
                actionType:''
              }
            })
          const handleCancel = ()=>{
              context.emit('close',false)
          }



          onMounted(()=>{
            Object.assign(form,props.initParams)
            Prism.highlightAll();
          })

          return{
            form,handleCancel
          }
        }
    }
</script>

<style scoped>
@import "../../public/prism/prism.css";
.el-form .el-select {
  width: 192px; /* 或者根据需要设置其他宽度 */
}
.vertical-radio .el-radio {
  display: block;
  margin-bottom: 10px; /* 可根据需要调整间距 */
}
.header {
  font-size: 16px;
  border-top: #f0f0f0 solid 1px;
  margin: 0;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.el-row{line-height: 40px;}
.el-col>label{color: #999}
</style>